<template>
	<view class="container">
		<!-- Course Header -->
		<view class="course-header">
			<image :src="course.image" mode="aspectFill" class="course-cover"></image>
			<view class="course-info-overlay">
				<text class="course-name">{{ course.name }}</text>
				<view class="course-stats">
					<text class="stats-item">{{ course.students }}人学习</text>
					<text class="stats-item">{{ course.duration }}</text>
				</view>
			</view>
		</view>

		<!-- Course Tabs -->
		<view class="tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === index }"
				@click="switchTab(index)"
			>
				<text>{{ tab }}</text>
			</view>
		</view>

		<!-- Tab Content -->
		<view class="tab-content">
			<!-- Introduction Tab -->
			<view v-if="currentTab === 0" class="intro-content">
				<view class="section">
					<view class="section-title">课程介绍</view>
					<view class="section-content">
						<text class="course-desc">{{ course.description }}</text>
					</view>
				</view>
				
				<view class="section">
					<view class="section-title">课程老师</view>
					<view class="teacher-info">
						<image :src="course.teacherAvatar" class="teacher-avatar"></image>
						<view class="teacher-detail">
							<text class="teacher-name">{{ course.teacher }}</text>
							<text class="teacher-title">{{ course.teacherTitle }}</text>
						</view>
					</view>
					<text class="teacher-bio">{{ course.teacherBio }}</text>
				</view>
				
				<view class="section">
					<view class="section-title">适合人群</view>
					<view class="section-content">
						<text class="target-audience">{{ course.targetAudience }}</text>
					</view>
				</view>
			</view>
			
			<!-- Curriculum Tab -->
			<view v-if="currentTab === 1" class="curriculum-content">
				<view class="chapter" v-for="(chapter, chapterIndex) in course.chapters" :key="chapterIndex">
					<view class="chapter-header" @click="toggleChapter(chapterIndex)">
						<text class="chapter-title">{{ chapter.title }}</text>
						<text class="chapter-arrow">{{ chapterExpanded[chapterIndex] ? '▼' : '▶' }}</text>
					</view>
					<view class="chapter-lectures" v-if="chapterExpanded[chapterIndex]">
						<view class="lecture" v-for="(lecture, lectureIndex) in chapter.lectures" :key="lectureIndex" @click="playLecture(chapterIndex, lectureIndex)">
							<view class="lecture-info">
								<text class="lecture-title">{{ lecture.title }}</text>
								<text class="lecture-duration">{{ lecture.duration }}</text>
							</view>
							<text class="lecture-icon">{{ lecture.isVideo ? '🎬' : '📄' }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- Comments Tab -->
			<view v-if="currentTab === 2" class="comments-content">
				<view class="comments-header">
					<text class="comments-title">学员评价 ({{ course.comments.length }})</text>
					<text class="rating">{{ course.rating }} ⭐</text>
				</view>
				
				<view class="comment" v-for="(comment, index) in course.comments" :key="index">
					<view class="comment-header">
						<image :src="comment.avatar" class="comment-avatar"></image>
						<view class="comment-user">
							<text class="comment-username">{{ comment.username }}</text>
							<text class="comment-time">{{ comment.time }}</text>
						</view>
						<text class="comment-rating">{{ comment.rating }} ⭐</text>
					</view>
					<text class="comment-content">{{ comment.content }}</text>
				</view>
				
				<view class="load-more" @click="loadMoreComments">
					<text>查看更多评价</text>
				</view>
			</view>
		</view>
		
		<!-- Bottom Action Bar -->
		<view class="action-bar">
			<view class="price-section">
				<text class="price">¥{{ course.price }}</text>
				<text class="original-price" v-if="course.originalPrice">¥{{ course.originalPrice }}</text>
			</view>
			<button class="enroll-btn" @click="enrollCourse">立即报名</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 状态变量
const courseId = ref(0);
const tabs = ref(['介绍', '课程', '评价']);
const currentTab = ref(0);
const chapterExpanded = reactive({});

const course = ref({
	id: 1,
	name: '人工智能基础',
	image: '/static/course1.jpg',
	students: 1200,
	duration: '12小时',
	rating: 4.8,
	description: '本课程介绍人工智能的基本概念、发展历史以及核心技术。通过系统的讲解和实践案例，帮助学生理解机器学习、深度学习和神经网络等关键知识点，为后续深入学习打下坚实基础。',
	teacher: '李教授',
	teacherTitle: '计算机科学教授，人工智能研究中心主任',
	teacherAvatar: '/static/teacher1.jpg',
	teacherBio: '李教授在人工智能领域有超过15年研究经验，曾在多个国际顶级会议发表论文，并担任多个AI项目的首席科学家。',
	targetAudience: '本课程适合对人工智能有兴趣的初学者，以及希望系统了解AI基础知识的工程师和学生。不需要特别的编程背景，但基本的数学知识将有助于理解相关概念。',
	price: 199,
	originalPrice: 299,
	chapters: [
		{
			title: '第一章：人工智能概述',
			lectures: [
				{ title: '人工智能的定义与发展历史', duration: '30分钟', isVideo: true },
				{ title: '人工智能的应用领域', duration: '45分钟', isVideo: true },
				{ title: '第一章测验', duration: '20分钟', isVideo: false }
			]
		},
		{
			title: '第二章：机器学习基础',
			lectures: [
				{ title: '机器学习简介', duration: '40分钟', isVideo: true },
				{ title: '监督学习与无监督学习', duration: '50分钟', isVideo: true },
				{ title: '常见算法介绍', duration: '60分钟', isVideo: true },
				{ title: '第二章测验', duration: '30分钟', isVideo: false }
			]
		},
		{
			title: '第三章：深度学习入门',
			lectures: [
				{ title: '神经网络基础', duration: '45分钟', isVideo: true },
				{ title: '深度学习框架介绍', duration: '35分钟', isVideo: true },
				{ title: '实战案例分析', duration: '70分钟', isVideo: true },
				{ title: '第三章测验', duration: '30分钟', isVideo: false }
			]
		}
	],
	comments: [
		{ 
			username: '学习者A', 
			avatar: '/static/avatar1.jpg', 
			rating: 5, 
			time: '2023-06-15', 
			content: '非常棒的课程，老师讲解非常清晰，内容也很全面，强烈推荐给想入门AI的朋友！' 
		},
		{ 
			username: '学习者B', 
			avatar: '/static/avatar2.jpg', 
			rating: 4, 
			time: '2023-05-20', 
			content: '课程内容很充实，但有些概念讲解得有点快，希望能有更多的例子来说明。' 
		},
		{ 
			username: '学习者C', 
			avatar: '/static/avatar3.jpg', 
			rating: 5, 
			time: '2023-04-10', 
			content: '作为一个完全的新手，通过这门课程我对AI有了基本的了解，教授很有耐心！' 
		}
	]
});

// 页面加载时执行
onLoad((option) => {
	if (option.id) {
		courseId.value = parseInt(option.id);
		// 实际应用中，这里应该通过API获取课程详情
		// getCourseDetail(courseId.value);
	}
	
	// 初始化章节展开状态
	course.value.chapters.forEach((_, index) => {
		chapterExpanded[index] = index === 0; // 默认展开第一章
	});
});

// 方法
function switchTab(index) {
	currentTab.value = index;
}

function toggleChapter(index) {
	chapterExpanded[index] = !chapterExpanded[index];
}

function playLecture(chapterIndex, lectureIndex) {
	const lecture = course.value.chapters[chapterIndex].lectures[lectureIndex];
	uni.showToast({
		title: `播放: ${lecture.title}`,
		icon: 'none'
	});
	// 实际应用中，这里应该跳转到视频播放页面或文档页面
}

function loadMoreComments() {
	uni.showToast({
		title: '加载更多评价',
		icon: 'none'
	});
	// 实际应用中，这里应该通过API加载更多评价
}

function enrollCourse() {
	uni.showModal({
		title: '确认报名',
		content: `您确定要报名《${course.value.name}》课程吗？`,
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '报名成功',
					icon: 'success'
				});
				// 实际应用中，这里应该调用支付API或报名API
			}
		}
	});
}

function getCourseDetail(id) {
	// 实际应用中，这里应该通过API获取课程详情
	// 示例代码:
	/*
	uni.request({
		url: 'https://api.example.com/courses/' + id,
		method: 'GET',
		success: (res) => {
			course.value = res.data;
			// 初始化章节展开状态
			course.value.chapters.forEach((_, index) => {
				chapterExpanded[index] = index === 0;
			});
		}
	});
	*/
}
</script>

<style>
.container {
	padding-bottom: 100rpx; /* 为底部操作栏留出空间 */
}

/* Course Header Styles */
.course-header {
	position: relative;
	width: 100%;
	height: 400rpx;
}

.course-cover {
	width: 100%;
	height: 100%;
}

.course-info-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx 20rpx;
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
	color: #fff;
}

.course-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.course-stats {
	display: flex;
	font-size: 24rpx;
}

.stats-item {
	margin-right: 20rpx;
}

/* Tabs Styles */
.tabs {
	display: flex;
	border-bottom: 1rpx solid #eee;
	background-color: #fff;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 25rpx 0;
	font-size: 28rpx;
	color: #666;
}

.tab-item.active {
	color: #007AFF;
	font-weight: bold;
	position: relative;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 50%;
	height: 4rpx;
	background-color: #007AFF;
	border-radius: 2rpx;
}

/* Tab Content Styles */
.tab-content {
	padding: 20rpx;
	background-color: #fff;
}

/* Introduction Tab Styles */
.section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	border-left: 6rpx solid #007AFF;
}

.course-desc, .target-audience, .teacher-bio {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.teacher-info {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.teacher-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.teacher-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 5rpx;
}

.teacher-title {
	font-size: 24rpx;
	color: #999;
}

/* Curriculum Tab Styles */
.chapter {
	margin-bottom: 20rpx;
	border: 1rpx solid #eee;
	border-radius: 10rpx;
	overflow: hidden;
}

.chapter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 20rpx;
	background-color: #f9f9f9;
}

.chapter-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.chapter-arrow {
	font-size: 24rpx;
	color: #999;
}

.lecture {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-top: 1rpx solid #eee;
}

.lecture-info {
	flex: 1;
}

.lecture-title {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 5rpx;
}

.lecture-duration {
	font-size: 22rpx;
	color: #999;
}

.lecture-icon {
	font-size: 30rpx;
	margin-left: 10rpx;
}

/* Comments Tab Styles */
.comments-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.comments-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.rating {
	font-size: 28rpx;
	color: #ff9500;
	font-weight: bold;
}

.comment {
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.comment-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}

.comment-user {
	flex: 1;
}

.comment-username {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 5rpx;
}

.comment-time {
	font-size: 22rpx;
	color: #999;
}

.comment-rating {
	font-size: 24rpx;
	color: #ff9500;
}

.comment-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}

.load-more {
	text-align: center;
	padding: 30rpx 0;
	color: #007AFF;
	font-size: 26rpx;
}

/* Bottom Action Bar Styles */
.action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background-color: #fff;
	border-top: 1rpx solid #eee;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.price-section {
	flex: 1;
}

.price {
	color: #ff5500;
	font-size: 36rpx;
	font-weight: bold;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
	margin-left: 10rpx;
}

.enroll-btn {
	height: 70rpx;
	line-height: 70rpx;
	background-color: #007AFF;
	color: #fff;
	font-size: 28rpx;
	border-radius: 35rpx;
	padding: 0 40rpx;
}
</style> 